import React, { Component } from 'react'
import '../static/css/play.css'
import {RightCircleOutlined,PauseCircleOutlined} from '@ant-design/icons'

export default class Play extends Component {
    state = {
        playUrl: "",
        playImg: "",
        lyric_list:[],
        playFlag: false
    }
    getPlayUrl(id){
        const url = '/song/url?id='+id
        this.$http.get(url).then(
            res=>{
                var data = res.data.data[0].url
                this.setState({playUrl: data})
                // this.audioRef.play()
            }
        )
    }
    getMusicDetail(id){
        const url = '/song/detail?ids='+id
        this.$http.get(url).then(
            res=>{
                var data = res.data.songs[0].al.picUrl
                this.setState({playImg: data})
            }
        )
    }
    lyric(strings){
        //使用正则
        const reg = /(\[.*\])(.*)/g
        const result = []
        strings.replace(reg,function(all,f,s){
            result.push(s)
        })
        return result

    }
    getMusicLyric(id){
        const url = '/lyric?id='+id;
        this.$http.get(url).then(
            res=>{
                const data = res.data.lrc.lyric
                const result = this.lyric(data)
                this.setState({lyric_list: result})
            }
        )

    }
    changePlay(){
        this.setState({playFlag: !this.state.playFlag})
        if(this.state.playFlag){
            this.audioRef.play();
        }else{
            this.audioRef.pause()            
        }
    }
    componentWillMount(){
        const id=this.props.match.params.id
        if(id){
            this.getPlayUrl(id)
            this.getMusicDetail(id)
            this.getMusicLyric(id)
        } 
    }
    render() {
        return (
            <div id="paly_app">
                <div id="paly_control">
                    <img className="m_pic" src={this.state.playImg}/>
                    <div className="m_control" onClick={()=>{this.changePlay()}}>
                        <RightCircleOutlined style={{ fontSize: 50, color: 'white' }}/>
                    </div>
                </div>
                <div id="lyric">
                    {
                        this.state.lyric_list.map(
                            (item,index) => <p key={index}>
                                {item}
                            </p>
                            
                        )
                    }
                </div>
                <audio ref={dom=>this.audioRef=dom} src={this.state.playUrl} controls  style={{ display: 'none' }}/>
            </div>
        )
    }
}
